<template>
  <div class="left flex">
    <div class="left-top">
      <div class="online">
        <div ref="someEcharts" id="chart-view" class="pie-style" style='width:150px;height:150px;'></div>
      </div>
      <div class="right-content">
        <div>项目名称：
          <el-dropdown class="dropdownc">
            <span class="el-dropdown-link">
              {{ dropTitle }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, i) in data.projectData.items" @click="changeDropdown(item)">{{
                item.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!-- {{ onlineDev.length }} -->
        <div>在线设备：&nbsp;&nbsp;<span class='TextColor'>{{ data.onlineDev[0].value }}</span> 盏</div>
        <div>智慧分区总数：&nbsp;&nbsp;<span class='TextColor'>{{ partitions.length }}</span></div>

      </div>
    </div>

    <div class="left-center">
      <img src='/src/assets/img/logo1.png' alt="" style="height:100%;width:100%" />
    </div>

    <div class="left-bottom">
      <img src="/src/assets/img/brand.png" alt="" />
    </div>


  </div>
</template>

<script setup>
import * as echarts from "echarts";

import { GetDeviceInfo, ProjectData, report } from '../../utils/util';
let { proxy } = getCurrentInstance()
let data = reactive({
  onlineDev: [{ value: '0' }],
  projectData: {},
  queryForm: {
    pageNum: 1,
    pageSize: 20
  },
  tableData: [

  ],
  total: 0,
  dialog: false,
  form: {},
  rules: {

  }
})



let formRef = ref(null)

const submit = () => { // 提交新增/编辑表单
  formRef.value.validate(valid => {
    if (valid) {

    }
  })
}
let ls = null;
let partitions = ref('');
let projectData = {};
const getList = () => { // 获取表格数据
  data.loading = true;
  // let params = new FormData();
  // params.append('fid', fid);
  $axios.post('/device/userDeviceCount', {}).then(i => {
    ///  data.onlineDev=res.data.data;
    ls = new GetDeviceInfo(i.data.data)
    const items = []
    ls.getProjectNameList().forEach((element) => {
      items.push({ key: element.id, label: element.productName });
    });
    projectData["items"] = items
    projectData["label"] = projectData["items"].length > 1 ? projectData["items"][1] : projectData["items"][0];
    getOnLineDev(projectData["label"].key)
    proxy.$mitt.emit('info', projectData["label"].key)




    projectData["totalPartitions"] = ls.getDeviceList(-1).length
    projectData["devInfo"] = ls.getDeviceList(-1)

    data.projectData = projectData;

    dropTitle.value = data.projectData.items[1].label;
    /////console.log(projectData);
    partitions.value = ls.getDeviceList(projectData["label"].key);









    let arr = [];
    for (const pd of projectData["devInfo"]) {
      if (pd.fid == projectData["label"].key) {
        arr.push({
          key: pd.id,
          label: pd.nickName
        })
      }

    }

    proxy.$mitt.emit('equipment', arr)
    proxy.$mitt.emit('devInfo', projectData["devInfo"])

  }).catch(err => { })
  data.loading = false;
}



const getOnLineDev = (id) => { // 
  let params = new FormData();
  params.append('fid', id);
  $axios.post('/operationDevice/getOnLineDev', params).then(res => {
    proxy.$mitt.emit('bigPieFn', res.data.data)
    data.onlineDev = new ProjectData(res.data.data, id).getOnlineDev();
    option.series[0].data = data.onlineDev;
    var myChart = echarts.init(document.getElementById('chart-view'));
    myChart.setOption(option);


  }).catch(err => { })
  data.loading = false;
}

let onlineDev = [];
let option = reactive({
  tooltip: {
    trigger: 'item',
    position: 'right'
  },
  // legend: {
  //   top: '5%',
  //   left: 'center'
  // },
  series: [
    {
      emphasis: false,
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 1,
        borderColor: '#fff',
        borderWidth: 1
      },
      label: {
        show: false,
        position: 'center'
      },
      color: [
        '#198CFA', '#505050'],
      labelLine: {
        show: false
      },
      data: onlineDev
    }
  ],
  graphic: { // 新增原生图形元素组件
    elements: [
      {
        type: 'text',
        left: 'center',
        top: '45.5%',
        style: {
          text: '在线设备',
          fontSize: 10,
          textAlign: 'center',
          width: 30,
          height: 25,
          fill: '#fff',
          fontWeight: '900'
        }
      }]
  }
})
const someEcharts = ref();

let dropTitle = ref('');
const changeDropdown = (item) => { //
  dropTitle.value = item.label;
  getOnLineDev(item.key)
  partitions.value = ls.getDeviceList(item.key);
  //getList(item.key);
  proxy.$mitt.emit('info', item.key)



  let arr = [];
  for (const pd of projectData["devInfo"]) {
    if (pd.fid == item.key || item.key == -1) {
      arr.push({
        key: pd.id,
        label: pd.nickName
      })
    }

  }

  proxy.$mitt.emit('equipment', arr)



}

onMounted(() => {
  //项目名称
  getList();
  //  getOnLineDev()


  //  let params = new FormData();
  //   params.append('fid', 49);
  //   $axios.post('/operationDevice/getOnLineDev', params).then(res => {
  // 	option.series[0].data=res.data.data;
  //   }).catch(err => { })
})
</script>

<style lang="scss" scoped>
.left {
  flex-direction: column;
}

.left-top {
  height: 150px;
  width: 100%;
  background: #0a1e50;
  display: flex;
  align-items: center;
  // justify-content: center;
  font-size: 14px;
}




.left {
  margin-right: 10px;
  width: 360px;
}

.text {
  color: white;

  div:nth-child(2) {
    width: 100px;
  }
}

.right-content {
  color: white;
  display: flex;
  flex-direction: column;
  // height: 90px;
  // justify-content:center;
  // margin-top: 9px;
  margin-bottom: 25px;
  margin-left: 0px;

  // line-height: 14px;
  div {
    margin-top: 7px;
    font-weight: normal;


  }

  div:first-child {
    display: flex;
    justify-content: center;
  }
}

.left-center {
  width: 100%;
  height: 140px;

  background-size: 100% 100%;
  margin-top: 12px;
}


.left-bottom {
  background: #0a1e50;
  margin-top: 12px;
  width: 100%;
  height: 600px;
}

.Dropdown>div {
  width: 120px;
}

.dropdownc {
  margin-top: 0 !important;
  color: #fff;
}

.TextColor {
  color: #ffc814;
}

.pie-style {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 137px;
  height: 150px;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 0px;
  margin: 0px;
  border-width: 0px;
}

.online {
  width: 150px;
  height: 150px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}

.el-dropdown-link {
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.dropdownc {
  outline: none !important;
  cursor: pointer;

  * {
    outline: none !important;
  }
}
</style>